import styled from 'styled-components';
import { useRef, useState } from 'react';
import { SettingOutlined } from '@ant-design/icons';
import {
    ModalForm,
    ProForm,
    ProFormDateRangePicker,
    ProFormSelect,
    ProFormText,
    ProFormTextArea,
} from '@ant-design/pro-components';
import { Button, Input, Form, message } from 'antd';
import { Player } from 'video-react';

import "video-react/dist/video-react.css";
import { peerAssistantShell } from '@/services/peer';

export const VideoWithAssistant = (props: {
    title?: string,
    buttonTitle?: string,
    text: string,
}) => {

    const [form] = Form.useForm<{
        aiRobot: string;
        model: string;
        system: string;
    }>();

    const [loading, setLoading] = useState<boolean>(false);

    const [video, setVideo] = useState<string | null>('http://asset.localhost/E:\\Linly-Talker\\output\\image##output2-0-100_full.mp4');

    //
    return (
        <Container>
            <Header>
                <TitleContainer>
                    <div>
                        {
                            props.title && <Title>{props.title}</Title>
                        }
                    </div>
                    <ModalForm<{
                        aiRobot: string;
                        model: string;
                        system: string;
                    }>
                        title="AIChat设置"
                        trigger={
                            <SettingsContainer>
                                <SettingOutlined />
                            </SettingsContainer>
                        }
                        form={form}
                        autoFocusFirstInput
                        modalProps={{
                            destroyOnClose: true,
                            onCancel: () => console.log('run'),
                        }}
                        submitTimeout={2000}
                        onFinish={async (values) => {
                            console.log(values.name);
                            message.success('提交成功');
                            return true;
                        }}
                    >
                        <ProForm.Group>
                            <ProFormSelect
                                request={async () => [
                                    {
                                        value: 'chapter',
                                        label: '盖章后生效',
                                    },
                                ]}
                                name="aiRobot"
                                label="AI选择"
                            />
                            <ProFormSelect
                                request={async () => [
                                    {
                                        value: 'chapter',
                                        label: '盖章后生效',
                                    },
                                ]}
                                name="model"
                                label="模型选择"
                            />
                        </ProForm.Group>
                        <ProFormTextArea
                            name="system"
                            label="System提示词"
                            initialValue="你是一名无所不能的专家,可以解决任何问题。"
                        />
                    </ModalForm>
                </TitleContainer>
                <ButtonContainer>
                    <Button style={{ width: '100%' }} danger type={'primary'}
                        onClick={async () => {
                            //assistant
                            setLoading(true);
                            setVideo(null);
                            try {
                                let result = await peerAssistantShell(
                                    {
                                        env: {},
                                        // current: '',
                                        before: [],
                                        script: [["cmd","/C","dir"]],
                                        after: []
                                    },
                                    {
                                        extensions: {
                                        }
                                    });
                                console.log("ssss", result);
                                setVideo(`http://asset.localhost/D:\\Linly-Talker\\output\\image##output2-0-100_full.mp4`);
                            } catch (err) {
                                console.log(err);
                            }
                            setLoading(false);
                        }}>{props.buttonTitle || '生成'}</Button>
                </ButtonContainer>
            </Header>
            <Player
                style={{
                    width: '100%',
                    flex: 1
                }}
                playsInline
                src={video}
            />
        </Container>
    );
}

export default VideoWithAssistant;


const Container = styled.div`
    height: 100%;
    width: 100%;
    padding: 0 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
`;


const Header = styled.div`
    height: 80px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
`;

const TitleContainer = styled.div`
    height: 30px;
    width: 100%;
    display: flex;
    justify-content: space-between;
`;
const Title = styled.div`
    height: 30px;
    line-height: 30px;
    font-size:12px;
    font-weight: 600;
`;

const ButtonContainer = styled.div`
    width: 100%;
    padding: 8px 10px;
`;
const SettingsContainer = styled.div`
    width: 30px;
    height: 30px;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
`;
